{extend name="common/base"}
{block name="content"}
<table id="user" lay-filter="user"></table>
<script type="text/html" id="operateBar">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    {{# if(d.username != 'admin' && d.username != '{$Think.session.admin.username}'){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{# } }}

    <!-- 这里同样支持 laytpl 语法，如： -->
    {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
    {{#  } }}
</script>
<script type="text/html" id="statusBar">
    {{#  if(d.status == 1){ }}
    <a lay-event="status"><input id="status{{d.id}}" type="checkbox" name="status" value="1" checked="checked" lay-skin="switch" lay-text="启用|锁定"  lay-filter="status"></a>
    {{# }else{ }}
    <a lay-event="status"><input id="status{{d.id}}" type="checkbox" name="status" value="2" lay-skin="switch" lay-text="启用|锁定" lay-filter="status"></a>
    {{# } }}
</script>

{/block}

{block name="js"}
{__block__}
<script>
layui.use(['form', 'table'], function () {
    var $ = layui.jquery;
    var table = layui.table;
    var form = layui.form;
    table.render({
        elem: '#user'
        ,height: 'full-220'
        ,data: {$users}
        ,page: true //开启分页
        ,limit: 15
        ,cols: [[ //表头
            {checkbox: true},
            {title: '序号', width: 100, templet: '<div>{{d.LAY_INDEX}}</div>', sort: true}
            ,{field: 'username', title: '用户名',sort: true}
            ,{field: 'name', title: '姓名',sort: true}
            ,{field: 'department', title: '部门',sort: true}
            ,{field: 'phone', title: '手机号',sort: true}
            ,{title: '状态', width:150, align:'center', toolbar: '#statusBar'}
            ,{title: '操作',fixed: 'right', width:150, align:'left', toolbar: '#operateBar'}
        ]]
    });
    table.on('tool(user)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的DOM对象
        // 删除
        if (layEvent === 'del') {
            layer.confirm('确定要删除吗', {icon: 3, title:'提示'}, function(index){
                var delLoadingIndex = layer.load(1);
                $.ajax({
                    type: 'DELETE',
                    url: '/user/del/' + data.id,
                    success: function (result) {
                        layer.close(delLoadingIndex);
                        if (result === 1) {
                            obj.del();
                            layer.msg('操作成功');
                            console.log(result);
                        } else if (result === 'hasContracts') {
                            layer.open({content:'操作失败。系统中有该用户录入的合同，不可删除', icon:2});
                        } else if (result === 'hasApprovals') {
                            layer.open({content:'操作失败。系统中有该用户发起的审批，不可删除', icon:2});
                        } else if (result === 'beNode') {
                            layer.open({content:'操作失败。该用户在审批中有作为审批人存在，不可删除', icon:2});
                        } else if (result === 'hasCustomers') {
                            layer.open({content:'操作失败。系统中有该用户录入的客户，不可删除', icon:2});
                        } else if (result === 'hasLinkmans') {
                            layer.open({content:'操作失败。系统中有该用户录入的联系人，不可删除', icon:2});
                        } else {
                            layer.msg('操作失败');
                            console.log(result);
                        }
                    },
                    error: function (error) {
                        layer.close(delLoadingIndex);
                        layer.msg('操作失败');
                        console.log(error)
                    }
                });

                layer.close(index);
            });
        }
        // 编辑
        if (layEvent === 'edit') {
            location.href = '/user/edit/' + data.id;
        }
        // 查看详情
        if (layEvent === 'detail') {
            var userStatus = data.status === 1 ? '启用' : '禁用';
            var userLevel = data.level === 1 ? '超级管理员' : '普通用户';
            layer.open({
                type: 1,
                area: ['500px'],
                btn: '确定',
                btnAlign: 'c',
                title: '用户详情',
                content: '<div style="padding: 10px;">' +
                '<table class="layui-table">' +
                '<tr><th style="font-weight: bold;" width="80">ID</th><td>'+data.id+'</td></tr>' +
                '<tr><th style="font-weight: bold;">用户名</th><td>'+data.username+'</td></tr>' +
                '<tr><th style="font-weight: bold;">用户级别</th><td>'+userLevel+'</td></tr>' +
                '<tr><th style="font-weight: bold;">姓名</th><td>'+data.name+'</td></tr>' +
                '<tr><th style="font-weight: bold;">手机号</th><td>'+data.phone+'</td></tr>' +
                '<tr><th style="font-weight: bold;">部门</th><td>'+data.department+'</td></tr>' +
                '<tr><th style="font-weight: bold;">用户状态</th><td>'+userStatus+'</td></tr>' +
                '<tr><th style="font-weight: bold;">创建时间</th><td>'+data.create_time+'</td></tr>' +
                '</table>' +
                '</div>' //这里content是一个普通的String
            });
        }
        // 状态更改
        if (layEvent === 'status'){
            tableSwitch($, obj, '/user/edit/', 'status')
        }
    })
})

</script>
{/block}